\<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
String wsBasePath="ws://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <base href="<%=basePath%>">
    
    <title>index</title>
	<!-- <script type="text/javascript" src="js/jquery-1.7.2.min.js"></script> -->
	<script type="text/javascript" src="javascript/dist/jquery.js"></script>
	
	<style type="text/css">
		.background1{
			background-color: rgb(178, 136, 152);
		}
		.body{
			font-size: 18px;
		}
		.span{
			color:  #FF00A5;
			font-weight: strong
		}
		.div{
			color:  #FF00A5;
			font-weight: strong;
			height: 30px;
			width: 500px;
		}
		.div_1_3{
			height: 180px;
		}
		.a{
			color:  #FFFFFF;
		}
	</style>
  </head>
  
  <body class="background1 body">
  Welcome<br/>
  <div id="login"><input id="userName" name="userName" type="text" ><input type="button" value="登陆" id="login_in"></div> 
  <br>
  	<input id="tarUserName" type="text">
    <input id="text" type="text" /><button onclick="send()">Send</button>    <button onclick="closeWebSocket()">Close</button>
    <div id="message">
    </div>
  </body>
  <script type="text/javascript">
	var websocket = null;
  		$(function(){
  			$('#login_in').on('click',function(){
  				var userCode=$('#userName').val();
  				$('#login').css('display','none');
  		       $.ajax({
  		    	  url:'<%=basePath%>user/login',
  		    	  type:'POST',
  		    	  data:{'userName':userCode},
  		    	  dataType:'json',
  		    	  success:function(data){
  		    		 //判断当前浏览器是否支持WebSocket
  		  		      if('WebSocket' in window){
  		  		          websocket = new WebSocket("ws://127.0.0.1:9581/chatsocket/websocket/"+data.userId);
  		  		      }
  		  		      else{
  		  		          alert('Not support websocket')
  		  		      }
  		  		       
  		  		      //连接发生错误的回调方法
  		  		      websocket.onerror = function(){
  		  		          setMessageInnerHTML("error");
  		  		      };
  		  		       
  		  		      //连接成功建立的回调方法
  		  		      websocket.onopen = function(event){
  		  		          setMessageInnerHTML("open");
  		  		      }
  		  		       
  		  		      //接收到消息的回调方法
  		  		      websocket.onmessage = function(event){
  		  		    	  console.log(event);
  		  		          setMessageInnerHTML(event.data);
  		  		      }
  		  		       
  		  		      //连接关闭的回调方法
  		  		      websocket.onclose = function(){
  		  		          setMessageInnerHTML("close");
  		  		      }
  		  		       
  		  		      //监听窗口关闭事件，当窗口关闭时，主动去关闭websocket连接，防止连接还没断开就关闭窗口，server端会抛异常。
  		  		      window.onbeforeunload = function(){
  		  		          websocket.close();
  		  		      }
  		  		       
  		  		      //将消息显示在网页上
  		  		      function setMessageInnerHTML(innerHTML){
  		  		          document.getElementById('message').innerHTML += innerHTML + '<br/>';
  		  		      }
  		  		       
  		  		      //关闭连接
  		  		      function closeWebSocket(){
  		  		          websocket.close();
  		  		      }
  		    	  }
  		       });
  		       
  			});
  		});
  	//发送消息
	      function send(){
  			  var obj=new Object();
				  obj.tarUserName=$('#tarUserName').val();
				  obj.msg=$('#text').val();
				  var message=JSON.stringify(obj);
				  console.log(message);
		      websocket.send(message);
	      }
  </script>
</html>
